<template>
  <div class="aside">
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="isCollapse" unique-opened
      background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF">
      <span class="title">{{ isCollapse ? '后台' : '奶油奶优管理系统' }}</span>
        <router-link to="/HomePage" class="router-link">
          <el-menu-item>
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
        </router-link>
        <el-submenu :index="item.name" v-for="item in menuData" :key="item.name">
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.name }}</span>
          </template>
          <el-menu-item-group>
            <router-link :to="i.path" class="router-link" v-for="i in item.childern" :key="i.name">
              <el-menu-item :index="i.path" class="el-menu-item-bg" @click="clickMenu(i)">
                <i :class="i.icon"></i>
                <span slot="title">{{ i.name }}</span>
              </el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-submenu>
    </el-menu>
  </div>
</template>

<script>


export default {
  name: 'KodaiCommonAside',
  comments: {

  },
  data () {
    return {
      menuData: [
        {
          // path: '/',
          name: '商品',
          icon: 'el-icon-shopping-bag-1',
          childern: [
            {
              path: '/ProductList',
              name: '商品列表',
              icon: 'el-icon-milk-tea',
            }, {
              path: '/ProductAdd',
              name: '添加商品',
              icon: 'el-icon-circle-plus-outline',
            }, {
              path: '/ProductType',
              name: '商品类别',
              icon: 'el-icon-menu',
            }, {
              path: '/ProductBrand',
              name: '商品说明',
              icon: 'el-icon-discount',
            }, {
              path: '/ProductSpecs',
              name: '商品规格',
              icon: 'el-icon-cloudy',
            }, {
              path: '/Purchase',
              name: '商品采购',
              icon: 'el-icon-truck',
            }, {
              path: '/Supplier',
              name: '供应商管理',
              icon: 'el-icon-s-custom',
            }
          ]
        }, {
          // path: '/',
          name: '订单',
          icon: 'el-icon-s-order',
          childern: [
            {
              path: '/OrderList',
              name: '订单列表',
              icon: 'el-icon-news',
            }, {
              path: '/ReturnGoods',
              name: '退货申请处理',
              icon: 'el-icon-box',
            }, {
              path: '/ReturnReason',
              name: '退货原因设置',
              icon: 'el-icon-edit-outline',
            }
          ]
        }, {
          // path: '/',
          name: '营销',
          icon: 'el-icon-sell',
          childern: [
            {
              path: '/SlideShow',
              name: '商品轮播图',
              icon: 'el-icon-picture',
            },
          ]
        }, {

          name: '权限',
          icon: 'el-icon-bell',
          childern: [
            {
              path: '/AdminList',
              name: '管理员列表',
              icon: 'el-icon-eleme',
            }, {
              path: '/UserList',
              name: '顾客列表',
              icon: 'el-icon-user',
            }, {
              path: '/RoleList',
              name: '角色列表',
              icon: 'el-icon-connection',
            },
          ]
        }

      ]
    };
  },

  mounted () {

  },
  computed: {
    isCollapse () {
      return this.$store.state.tab.isCollapse
    }
  },
  methods: {
    clickMenu (item) {
      //   // 当页面路由与当前路由不一致时才跳转
      //   if (this.$route.path !== item && !(this.$route.path === '/admin' && (item === '/HomeIndex'))) {
      //     // 跳转路径
      //     this.$router.push(item)
      //   }
      // 调用面包屑方法
      this.$store.commit('selectMenu', item)
    }
  },
};
</script>

<style lang="scss" scoped>
.el-menu {
  height: 100vh;
  border-right: none;

  .title{
    color: #ffffff;
    text-align: center;

    font-size: 22px;
    padding: 0px 1rem;
  }

  .el-menu-item-bg {
    background: #1F2D3D !important;
    min-width: auto !important;
    padding-left: 55px;
  }

  .el-menu-item-bg:hover {
    background: #001b33 !important;
    color: #f3cb87 !important;
  }

  .el-menu-item i {
    color: inherit !important;
  }

  .router-link {
    text-decoration: none;
    background: #001b33 !important;
  }

  .router-link:hover {
    text-decoration: none;
    color: #409EFF;
  }

  .el-menu span {
    display: inline-block;
    margin-left: 5px;
  }
}
</style>